<template>
  <div id="business">
    <router-link to="/businessdetail">
      <img style="width:100%" src="../assets/img/three/titleimg.png" alt="" />
    </router-link>
    <div class="fb mt24">
      <div class="fs box">
        <img style="width:.14rem" src="../assets/img/three/img01.png" alt="" />
        <div class="text">全区项目总数:</div>
        <div class="num">
          1,617
          <span>个</span>
        </div>
      </div>
      <div class="fs box">
        <img style="width:.14rem" src="../assets/img/three/img02.png" alt="" />
        <div class="text">全区项目总金额:</div>
        <div class="num">
          3.3
          <span>亿元</span>
        </div>
      </div>
    </div>
    <!-- <img
      class="mt6"
      style="width:100%"
      src="../assets/img/three/ceshi.png"
      alt=""
    /> -->
    <div class="echart-box fb">
      <div class="left">
        <div
          style="width:1.36rem;height: 1.8rem;position: relative;z-index: 1;"
          ref="echart"
        ></div>
        <div class="detail">
          <img style="width:100%" src="../assets/img/three/img06.png" alt="" />
          <div style="width:1rem" class="text">
            {{ clickData.name }}<br />项目总数
          </div>
          <div class="num fc">{{ clickData.num }}<span>个</span></div>
        </div>
      </div>
      <div class="right fc">
        <img style="width:.45rem" src="../assets/img/three/img07.png" alt="" />
        <span class="text">近三年项目数/个</span>
        <div
          style="width:2.4rem;height: 1.6rem;position: relative;z-index: 1;"
          ref="echartLine"
        ></div>
      </div>
    </div>
    <div class="col3 mt6">
      <div class="item fs">
        <img style="width:.48rem" src="../assets/img/three/img03.png" alt="" />
        <div class="des">
          <div class="text">项目合格率</div>
          <div class="num">
            96.3
            <span>%</span>
          </div>
        </div>
      </div>
      <div class="item fs">
        <img style="width:.48rem" src="../assets/img/three/img04.png" alt="" />
        <div class="des">
          <div class="text">项目违规率</div>
          <div class="num">
            3.7
            <span>%</span>
          </div>
        </div>
      </div>
      <div class="item fs">
        <img style="width:.48rem" src="../assets/img/three/img05.png" alt="" />
        <div class="des">
          <div class="text">项目预警率</div>
          <div class="num">
            12.9
            <span>%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { post, get } from "@/utils/axios";

export default {
  name: "business",
  components: {},
  data() {
    return {
      echart: null,
      timer: null,
      echartData: [
        {
          value: 10,
          num: "159",
          year: [40, 48, 72],
          name: "上塘街道",
        },
        {
          value: 10,
          num: "165",
          year: [41, 50, 74],
          name: "祥符街道",
        },
        {
          value: 10,
          num: "140",
          year: [35, 42, 63],
          name: "半山街道",
        },
        {
          value: 10,
          num: "170",
          year: [43, 51, 77],
          name: "康桥街道",
        },
        {
          value: 10,
          num: "126",
          year: [32, 38, 57],
          name: "湖墅街道",
        },
        {
          value: 10,
          num: "178",
          year: [45, 53, 80],
          name: "小河街道",
        },
        {
          value: 10,
          num: "149",
          year: [37, 45, 67],
          name: "拱宸桥街道",
        },
        {
          value: 10,
          num: "155",
          year: [39, 47, 70],
          name: "和睦街道",
        },
        {
          value: 10,
          num: "173",
          year: [43, 52, 78],
          name: "米市巷街道",
        },
        {
          value: 10,
          num: "202",
          year: [51, 61, 91],
          name: "大关街道",
        },
      ],
      clickData: {
        value: 10,
        num: "159",
        year: [40, 48, 72],
        name: "上塘街道",
      },
      dataIndex: 0,
    };
  },
  created() {
    // this.timer = setInterval(() => {}, 120000);
  },
  mounted() {
    this.$nextTick(function() {
      this.initEchart();
      this.initEchartLine(this.clickData.year);
    });
    window.onresize = () => {
      this.echart.resize();
    };
  },

  beforeDestroy() {
    this.echart.dispose();
    this.echart = null;
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    initEchart() {
      this.echart = this.$echarts.init(this.$refs.echart);

      const color = ["#3f85f5", "#b2f2f5"];
      var option = {
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b}: {c} ({d}%)",
        // },
        color: color,
        // legend: {
        // orient: "vertical",
        // left: 10,
        // data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        // color: color,
        // },
        series: [
          {
            name: "街道项目",
            type: "pie",
            // 第一个参数是内圆半径，第二个参数是外圆半径，相对饼图的宿主div大小
            radius: ["100%", "86%"],
            avoidLabelOverlap: false,
            hoverOffset: -4, //鼠标悬浮偏移距离,圆环宽度
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              itemStyle: {
                color: "#d1489f",
              },
              // label: {
              //   show: true,
              //   fontSize: "20",
              //   fontWeight: "bold",
              // },
            },
            labelLine: {
              show: false,
            },
            data: this.echartData,
          },
        ],
      };

      let that = this;
      function eConsole(param) {
        clearInterval(that.timer);
        //param.dataIndex 获取当前点击索引，
        that.clickData = param.data;
        that.dataIndex = param.dataIndex;
        // console.log(that.clickData);
        that.initEchartLine(that.clickData.year);
      }

      this.echart.on("click", eConsole);
      this.echart.setOption(option);

      var index = 0;
      this.timer = setInterval(() => {
        this.echart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index,
        });
        this.echart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index - 1 < 0 ? 9 : index - 1,
        });
        this.initEchartLine(this.echartData[index].year);
        this.clickData = this.echartData[index];
        index++;
        if (index > 9) {
          index = 0;
        }
      }, 1000);
    },
    initEchartLine(yData) {
      this.echartLine = this.$echarts.init(this.$refs.echartLine);

      var now = new Date(); //当前日期
      var nowYear = now.getFullYear(); //当前年
      let xData = [nowYear - 2 + "年", nowYear - 1 + "年", nowYear + "年"];
      let option = {
        backgroundColor: "transparent",
        grid: {
          top: "25%",
          left: "-5%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        animation: false,
        xAxis: [
          {
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#82b0ec",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#82b0ec",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              margin: 30,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#0c2c5a",
              },
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, -6],
            symbolPosition: "end",
            z: 12,
            // "barWidth": "0",
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 14,
                fontWeight: "bold",
                color: "#34DCFF",
              },
            },
            color: "#2DB1EF",
            data: yData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, 7],
            // "barWidth": "20",
            z: 12,
            color: "#2DB1EF",
            data: yData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [36, 15],
            symbolOffset: [0, 12],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#2EA9E5",
                borderType: "solid",
                borderWidth: 1,
              },
            },
            data: yData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 20],
            symbolOffset: [0, 18],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#19465D",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: yData,
          },
          {
            type: "bar",
            //silent: true,
            barWidth: "25",
            barGap: "10%", // Make series be overlap
            barCateGoryGap: "10%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#38B2E6",
                  },
                  {
                    offset: 1,
                    color: "#0B3147",
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData,
          },
        ],
      };
      this.echartLine.setOption(option, true);
    },
  },
};
//echarts字号处理
function fontSize(res) {
  let clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 1920);
  return res * fontSize;
}
</script>
business

<style lang="scss" scoped>
#business {
  width: 100%;
  padding-right: 0.6rem;
  .fb .box {
    align-items: flex-end;
    .num {
      line-height: 0.14rem;
    }
    .text {
      margin: 0 0.06rem;
      line-height: 0.12rem;
    }
  }
  .col3 img {
    margin-right: 0.24rem;
  }
  .echart-box .left {
    position: relative;
    z-index: 1;
    .detail {
      width: 90%;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -55%);
      z-index: 0;
      .text {
        color: #fff;
        position: absolute;
        left: 50%;
        top: 44%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
      .num {
        font-weight: 700;
        position: absolute;
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }
  }
  .echart-box .right {
    .text {
      writing-mode: vertical-lr;
      text-orientation: upright;
    }
  }
}
</style>
